<template>
    <div class="cont" ref="wrapper">
        <van-list
            v-model="loading"
            :finished="finished"
            finished-text="没有更多了"
            @load="onLoad"
        >
            <ul>
                <li v-for="(item,index) in list" :key="index" @click="givegoods(item.goodsId)">
                    <div class="img">
                        <img :src="`https://www.160dyf.com/${item.goodsImg}`" alt="">
                    </div>
                    <h2>{{item.goodsName}}</h2>
                    <p>￥{{item.goodsPrice}}<span></span></p>
                </li>
            </ul>
        </van-list>
    </div>
</template>

<script>
    import request from '../utils/request'
    
    export default {
        data() {
            return {
                list: [],
                scor:"https://www.160dyf.com/",
                loading: false,
                finished: false,
                p:1   //分页页码
            }
        },
        created () {
            // this.fetchData()
        },
        computed: {
            pagenum() {
                return this.$store.state.detailsgoods.pagenum  //拿取状态机里的pagenum值(商品数据的条数)
            }
        },
        methods: {
            fetchData() {  //数据请求的方法
                let url = `/hehe/Mobile/MobileApi/goodsTypeList.html?typeId=231&is_new=1&new_level=3&tagType=1&sortType=&page=${this.pagenum[0]}&pageSize=10&vue_nologin=1`
                request.get(url).then(res=>{
                    // console.log(res);
                    let {list} = res.data.data
                    if(list.length){
                        this.list = [
                            ...this.list, //旧数据
                            ...list  //新数据
                        ]
                        // this.p++
                    }else{
                      this.finished = true  //没有更多数据了
                    }
                    this.loading = false;
                })
            },

            onLoad(){
              this.fetchData()
            },

            givegoods(idx){   //将当前点击的数据信息传到状态机里为详情页提供数据包  同时跳转到详情页
                let obj1={}
                let list=this.list //拿取全部的数据
                for(let i=0;i<list.length;i++){  //遍历所有数据  
                    if(list[i].goodsId==idx){   //判断所有数据中的goodsId值是否与当前点击的一致,
                        obj1=list[i]       //则 将当前的数据信息上传至状态机中 供详情页使用
                    }
                }
                let p=this.p
                this.$store.commit('detailsgoods/details',{obj1,p})
                obj1={}
                this.$router.push('/Detail')  //编程式导航   跳转至详情页
            },

            onLoad(){
              this.fetchData()
            }
        },


        created () {
            console.log(this.pagenum);
        },
    }
</script>


<style src="../assets/css/homelist.css" scoped></style>

